<template>
  <div class="gauge-simple-wrapper" :style="containerStyle">
    <v-chart ref="chartRef" :option="chartOption" :style="chartStyle" autoresize />
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue';
import { use } from 'echarts/core';
import * as echarts from 'echarts';
import { CanvasRenderer } from 'echarts/renderers';
import { GaugeChart, BarChart, PieChart } from 'echarts/charts';
import {
  TitleComponent,
  TooltipComponent,
  LegendComponent,
  PolarComponent
} from 'echarts/components';
import VChart from 'vue-echarts';
import { useAutoDataBinding } from '@/composables/use-data-binding';

// 注册ECharts组件
use([
  CanvasRenderer,
  GaugeChart,
  BarChart,
  PieChart,
  TitleComponent,
  TooltipComponent,
  LegendComponent,
  PolarComponent
]);

// Props定义
interface Props {
  value?: number;
  lowColor?: string;
  mediumColor?: string;
  highColor?: string;
  textColor?: string;
  dataBinding?: any;
}

const props = withDefaults(defineProps<Props>(), {
  value: 70,
  lowColor: '#00ed03',
  mediumColor: '#ffb800',
  highColor: '#af244a',
  textColor: '#ffffff'
});

// 图表引用
const chartRef = ref<InstanceType<typeof VChart>>();

// 响应式属性（用于数据绑定）
const componentProps = computed(() => ({
  value: props.value,
  lowColor: props.lowColor,
  mediumColor: props.mediumColor,
  highColor: props.highColor,
  textColor: props.textColor
}));

// 数据绑定
const dataBinding = useAutoDataBinding(
  props.dataBinding?.enabled ? props.dataBinding : null,
  componentProps
);

// 样式计算
const containerStyle = computed(() => ({
  width: '100%',
  height: '100%',
  minHeight: '400px'
}));

const chartStyle = computed(() => ({
  width: '100%',
  height: '100%'
}));

// 渐变色仪表盘配置
const chartOption = computed(() => {
  const value = componentProps.value.value;
  const lowColor = componentProps.value.lowColor;
  const mediumColor = componentProps.value.mediumColor;
  const highColor = componentProps.value.highColor;
  const textColor = componentProps.value.textColor;

  return {
    // backgroundColor: '#0E1327',
    series: [
      {
        type: 'gauge',
        z: 100,
        axisLine: {
          lineStyle: {
            width: 5,
            color: [
              [
                0.3,
                new echarts.graphic.LinearGradient(0, 1, 1, 0, [
                  {
                    offset: 0,
                    color: `${lowColor}1A` // 10% opacity
                  },
                  {
                    offset: 0.5,
                    color: `${lowColor}99` // 60% opacity
                  },
                  {
                    offset: 1,
                    color: lowColor
                  }
                ])
              ],
              [
                0.7,
                new echarts.graphic.LinearGradient(0, 1, 1, 0, [
                  {
                    offset: 0,
                    color: `${mediumColor}1A` // 10% opacity
                  },
                  {
                    offset: 0.5,
                    color: `${mediumColor}99` // 60% opacity
                  },
                  {
                    offset: 1,
                    color: mediumColor
                  }
                ])
              ],
              [
                1,
                new echarts.graphic.LinearGradient(0, 1, 1, 0, [
                  {
                    offset: 0,
                    color: `${highColor}1A` // 10% opacity
                  },
                  {
                    offset: 0.5,
                    color: `${highColor}99` // 60% opacity
                  },
                  {
                    offset: 1,
                    color: highColor
                  }
                ])
              ]
            ]
          }
        },
        pointer: {
          itemStyle: {
            color: 'auto'
          }
        },
        axisTick: {
          distance: 0,
          length: 8,
          lineStyle: {
            color: 'auto',
            width: 2
          }
        },
        splitLine: {
          distance: 0,
          length: 20,
          lineStyle: {
            color: 'auto',
            width: 4
          }
        },
        axisLabel: {
          color: textColor,
          distance: 30,
          fontSize: 15
        },
        detail: {
          valueAnimation: true,
          formatter: '{value} %',
          color: textColor
        },
        data: [
          {
            value: value
          }
        ]
      }
    ]
  };
});

onMounted(() => {
  // 确保图表可以正确响应尺寸变化
  if (chartRef.value) {
    // 延迟调用resize确保图表正确渲染
    setTimeout(() => {
      chartRef.value?.resize();
    }, 100);
  }
});
</script>

<style scoped>
.gauge-simple-wrapper {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
  border-radius: 8px;
}

.gauge-simple-wrapper > div {
  width: 100% !important;
  height: 100% !important;
}
</style>
